<template>
  <div class="home-footer">
    <div class="home-footer-center">
      <el-row  :gutter="20">
        <el-col :span="6">
          <div>
            <p>@网页制作者</p>
            <div style="width: 70%">
              <el-divider class="word-style"></el-divider>
              <p>组长：李孟泽</p>
              <p>组员：颜茁，杨九坤，朱珩瑕，赵鹏茹，唐佳雪，陈俊杰，朱继冀</p>
            </div>

          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <p>使用框架</p>
            <div style="width: 70%">
              <el-divider class="word-style"></el-divider>
              <p>element-plus UI</p>
              <p>Vue3.0</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <p>import links</p>
            <el-divider class="word-style" style="width: 60%;"></el-divider>
            <div style="width: 70%;margin-top: 16px;">
              <a class="footer-a-style" href="https://www.zhipin.com/chongqing/" target="_blank">Boss直聘官网</a>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <p>Contact</p>
            <div style="width: 70%">
              <el-divider class="word-style"></el-divider>
              <p><i class="el-icon-phone"></i>  + 10 086 11</p>
              <p><i class="el-icon-s-home"></i>  ChongQing, CQ CA</p>
              <p><i class="el-icon-s-order"></i>  123456789@abc.com</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowFooter'
}
</script>

<style scoped>
.home-footer {
  color: #FFFFFF;
  background: #E8F5E9;
  height: 200px;
  font-family: "Roboto",sans-serif;
  font-weight:bold;
}
.home-footer-center{
  position: relative;
  width: 70%;
  left: 15%;
  color: #185e20;
}
.word-style{
  background: #185e20;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 2px 0;
}
.footer-a-style{
  color: #185e20;
}
.footer-a-style:hover{
  color: #6ba3ff;
}
</style>
